<template>
	<view class="">
		<view class="header">
			<view class="basj">
				<image @click="gobacks" src="/static/dazi/bak.png" mode=""></image>
				<text class="title">电子邮箱</text>
			</view>
		</view>
		<view class="conshe">

			<view class="urtems">
				<view class="shud">
					原邮箱地址
				</view>
				<view class="conste">
					<view class="c5s ajwbg">
						
						<view class="incenm" s>
							<text class="stag">132****2544@123.cj</text>
						</view>

					</view>


				</view>
			</view>

			<view class="urtems">
				<view class="shud">
					新邮箱地址
				</view>
				<view class="conste">
					<view class="xijsd">
					
						<view class="incenm">
							<input type="tel" placeholder="请输入新的邮箱地址" v-model="newemail" placeholder-class="co" />
						</view>
						<image class="siecle" src="/static/dazi/cle.png" mode="" @click="newemail =''"></image>
					</view>


				</view>

				<view class="shud">
					验证码
				</view>
				<view class="conste">
					<view class="xijsd">

						<view class="incenm">
							<input type="text" placeholder="请输入收到的验证码" placeholder-class="co" />
						</view>
						<view class="send" @click="sencode">
							发送验证码
						</view>

					</view>

				</view>

			</view>

			<view class="busnd btnact ash fied">
				确认更改
			</view>


		</view>

		<!-- 验证码 -->
		<up-overlay :show="show" @click="show = false"
			style="display: flex;align-items: center;justify-content: center;">
			<view class="pouper" @tap.stop>

				<view class="rosh">
					<image @click="show = false" src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="shudcode">
					请输入下方图形验证码
				</view>

				<view class="iosld">
					<input type="text" placeholder="请输入验证码" placeholder-class="co" />
					<view class="ksbq">
						<image src="/static/image/chat_system.png" mode=""></image>
						<view class="tsye">
							看不清?换一张
						</view>
					</view>
				</view>
				<view class="busnd btnact ash">
					确认
				</view>
			</view>
		</up-overlay>

		<!-- 国家选择 -->
		<up-overlay :show="show2" @click="show2 = false"
			style="display: flex;align-items: flex-end;justify-content: flex-end;width: 750rpx;">
			<view class="sleguo" @tap.stop>
				<view class="ropwen">
					<view class="lesi">
						选择国家/地区代码
					</view>
					<image class="ediuyt" @click="show2=false " src="/static/dazi/clos.png" mode=""></image>
				</view>
				<view class="serdh">
					<u--input placeholder="搜索" prefixIcon="search" v-model="query" @input="filterCountries"
						prefixIconStyle="font-size: 22px;color: #909399"></u--input>
				</view>
				<view class="sercha">
					<scroll-view scroll-y="true" style="height: 800rpx;">
						<view class="comyst">
							<view class="ontet" v-for="(item,index) in filteredItems" :key="index"
								:class="doubelslel ==index?'doubelslel':'' " @click="changecurry(item)">
								<view class="klia">
									<image :src=" item.country_image " mode=""></image>
									<view class="nals">
										{{item.en}}
									</view>
								</view>
								<view class="ados">
									+{{item.mobile_code}}
								</view>
							</view>

						</view>
					</scroll-view>

				</view>
			</view>
			<!-- </u-popup> -->
		</up-overlay>




	</view>
</template>

<script>
	export default {
		data() {
			return {
				newemail: '',
				show: false, //验证码
				show2: false, //国家
				filteredItems: [{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					},
					{
						country_image: '/static/dazi/china.png',
						en: '中文',
						mobile_code: 20
					}
				], // 存储过滤后的结果
				currylist: [], //国家选择
				doubelslel: 0, //选择的国家
				imgcurry: {}, //默认嗯国家选择
			}
		},
		methods: {
			opencury() {
				this.show2 = true
			},
			//选择的国家
			changecurry(item) {
				console.log(item)
				this.imgcurry = item
				this.show2 = false
				this.query = ''
			},
			// 打开发送验证码弹框
			sencode() {
				this.show = true
			},


			gobacks() {

				// #ifdef H5
				history.back();
				// #endif

				// #ifdef APP
				uni.navigateBack()
				// #endif

			},
		}
	}
</script>

<style lang="scss">
	.fied{
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
	}
	.imghu {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
		border-radius: 50rpx;
		margin-right: 20rpx;
	}

	.acys {
		color: #0FA088 !important;
	}

	.ontet {
		margin-bottom: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ados {
		color: rgba(131, 116, 135, 1);
		font-size: 24rpx;
	}

	.klia {
		display: flex;
		align-items: center;

		image {
			margin-right: 30rpx;
			width: 50rpx;
			height: 50rpx;
			vertical-align: middle;
			border-radius: 50rpx;
		}

		.nals {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}
	}

	.serdh {
		margin: 30rpx 0;
		height: 96rpx;
		line-height: 96rpx;
		border-radius: 30rpx;
		border: 1px solid #CFD6E3;
		display: flex;
		align-items: center;


	}

	.u-border {
		border-style: none !important;
	}

	.ropwen {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ediuyt {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
	}

	.lesi {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: bold;
	}

	.btnact {
		background-color: #fb75d6 !important;
	}

	.ash {
		margin-top: 30rpx !important;
	}

	.rosh {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.isehd {
		height: 32rpx;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.ediuyt {
		width: 48rpx;
		height: 48rpx;
		vertical-align: middle;
	}

	.lesi {
		color: rgba(0, 0, 0, 1);
		font-size: 32rpx;
		font-weight: bold;
	}

	.sleguo {
		padding: 30rpx;
		width: 750rpx;
		background-color: #fff;
		z-index: 9999999999;
		border-radius: 50rpx 50rpx 0 0;
	}


	.black-border {
		border: 1px solid #ede5ed;
	}

	.blon-border {
		border: 1px solid rgba(251, 117, 214, 1) !important;
		border-radius: 24rpx;
	}

	.u-transition {
		backdrop-filter: blur(3px);
		background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) -30%, rgba(255, 255, 255, 0) 50%);

	}

	::deep .bgpup {
		background-color: #2A222F !important;
	}

	.co {
		font-size: 28rpx;
		color: rgba(195, 176, 195, 1);
	}

	.iosld {
		margin: 50rpx 0;
		display: flex;
		// align-items: center;
		justify-content: space-between;

		input {
			margin-right: 20rpx;
			padding: 0 20rpx;
			height: 100rpx;
			border: 1px solid rgba(237, 229, 237, 1);
			border-radius: 30rpx;

		}

		.ksbq {
			display: flex;
			flex-direction: column;
			align-items: flex-end;

			image {
				border: 1px solid #ccc;
				width: 240rpx;
				height: 100rpx;
			}

			.tsye {
				margin: 20rpx 0;
				color: rgba(251, 117, 214, 1);
				font-size: 24rpx;
			}
		}

	}

	.shudcode {
		color: 32rpx;
		font-size: 32rpx;
		text-align: center;
		color: #2A222F;
	}

	.pouper {
		background-color: #fff;
		width: 600rpx;

		padding: 30rpx;
		border-radius: 30rpx;
	}

	.send {
		color: rgba(251, 117, 214, 1);
		font-size: 28rpx;
	}

	.ashw {
		color: #837487 !important;
	}

	.ajwbg {
		background-color: #F8EFF9 !important;
	}

	.stag {
		color: #837487;
		font-size: 32rpx;
	}

	.botm {
		width: 20rpx;
		height: 16rpx;
		vertical-align: middle;
	}

	.sechs {
		display: flex;
		align-items: center;



		.senum {
			padding: 0 6rpx;
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		.cury {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.seins {
		margin-top: 40rpx;
	}

	.regas {
		color: rgba(251, 117, 214, 1);
		font-size: 28rpx;
		text-align: center;
		margin: 40rpx 0;
	}

	.busnd {
		margin: 100rpx 0 30rpx;
		background-color: rgba(255, 154, 233, 0.4);
		height: 110rpx;
		text-align: center;
		line-height: 110rpx;
		border-radius: 100rpx;
		color: #fff;
		font-size: 32rpx;
	}

	.bgd {
		background: rgba(88, 168, 255, 0.1);
		border: 1px solid rgba(88, 168, 255, 1) !important;

	}

	.conse {
		text-align: right;
		color: rgba(131, 116, 135, 1);
		font-size: 24rpx;
	}

	.c5s {
		border: 1px solid rgba(237, 229, 237, 1);
		display: flex;
		align-items: center;
		// justify-content: space-between;
		height: 100rpx;
		padding: 0 30rpx;
		border-radius: 24rpx;
	}

	.xijsd {
		border: 1px solid rgba(237, 229, 237, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
		padding: 0 30rpx;
		border-radius: 24rpx;
	}

	.conste {
		margin: 30rpx 0;
	}

	.co {
		color: rgba(195, 176, 195, 1);
		font-size: 28rpx;
	}

	.siecle {
		width: 44rpx;
		height: 44rpx;
	}

	.urtems {
		background-color: #fff;
		padding: 30rpx;
		margin-bottom: 40rpx;
		border-radius: 30rpx;

		.shud {
			color: rgba(42, 34, 47, 1);
			font-size: 28rpx;
		}

		.incenm {}
	}

	.conshe {
		margin: 60rpx 0;
	}

	page {
		padding: 30rpx;
		background-color: #f7eff8;
		overflow: hidden;
		background-image: url('/static/assets7/e9cd3fc4ee4eabc1262262a469ab1c21.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.basj {
		display: flex;
		align-items: center;
		height: 60rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			vertical-align: middle;
		}

		.title {
			margin-left: 10rpx;
			color: #2A222F;
			font-size: 40rpx;
		}
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60rpx;

		letter-spacing: 2rpx;
		/* 字母间距 */
		font-weight: 600;
		// border: #dddddd solid 1px;

		.btn-side {
			position: absolute;
			line-height: 60rpx;
			font-size: 28rpx;
			cursor: pointer;

			&.right {
				right: 30rpx;
			}
		}
	}
</style>